<template>
  <el-collapse>
    <el-collapse-item title="输出流连线判断的顺序">
      <div class="outgoing-item" v-for="(item, index) in elementOutgoing" :key="item.id">
        <span>{{ `${index + 1}. 连线到 ` }}</span>
        <span>{{ item.target && (item.target.name || item.target.id) }}</span>
        <el-button v-if="index !== 0" link type="primary" @click="moveUp(index)">上移</el-button>
        <el-button v-if="index !== elementOutgoing.length - 1" link type="primary" @click="moveDown(index)">下移</el-button>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
  
  <script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { getGatewayOutgoing, moveGatewayOutgoingUp, moveGatewayOutgoingDown } from '@wf/components/bpmnjs/bo-utils/gatewayUtil';

export default defineComponent({
  name: 'ElementGateway',
  data() {
    return {
      elementOutgoing: []
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getOutgoing();
    },
    getOutgoing() {
      this.elementOutgoing = getGatewayOutgoing(this.getActive);
    },
    moveUp(index: number) {
      moveGatewayOutgoingUp(this.elementOutgoing, index);
    },
    moveDown(index: number) {
      moveGatewayOutgoingDown(this.elementOutgoing, index);
    }
  }
});
</script>
  
<style lang="scss" scoped>
.outgoing-item {
    display: flex;
    align-items: center;
    margin: 4px 0;
    gap: 8px;
}
</style>